---
id: button
title: Button
---

import Playground from '@theme/Playground';

## Colors

<Playground>
  <div>
    <button class="button button--primary">Primary</button>
    <button class="button button--secondary">Secondary</button>
    <button class="button button--success">Success</button>
    <button class="button button--info">Info</button>
    <button class="button button--warning">Warning</button>
    <button class="button button--danger">Danger</button>
    <button class="button button--link">Link</button>
  </div>
</Playground>

## Outline

<Playground>
  <div>
    <button class="button button--outline button--primary">Primary</button>
    <button class="button button--outline button--secondary">Secondary</button>
    <button class="button button--outline button--success">Success</button>
    <button class="button button--outline button--info">Info</button>
    <button class="button button--outline button--warning">Warning</button>
    <button class="button button--outline button--danger">Danger</button>
  </div>
</Playground>

## Active

<Playground>
  <div>
    <button class="button button--outline button--active button--primary">
      Primary
    </button>
    <button class="button button--outline button--active button--secondary">
      Secondary
    </button>
    <button class="button button--outline button--active button--success">
      Success
    </button>
    <button class="button button--outline button--active button--info">
      Info
    </button>
    <button class="button button--outline button--active button--warning">
      Warning
    </button>
    <button class="button button--outline button--active button--danger">
      Danger
    </button>
    <button class="button button--outline button--active button--link">
      Link
    </button>
  </div>
</Playground>

## Disabled

<Playground>
  <div>
    <button class="button disabled button--primary">Primary</button>
    <button class="button disabled button--secondary">Secondary</button>
    <button class="button disabled button--success">Success</button>
    <button class="button disabled button--info">Info</button>
    <button class="button disabled button--warning">Warning</button>
    <button class="button disabled button--danger">Danger</button>
    <button class="button disabled button--link">Link</button>
  </div>
</Playground>

## Links

Links can also be styled as buttons.

<Playground>
  <div>
    <a class="button button--primary" href="#url">
      Primary
    </a>
    <a class="button button--secondary" href="#url">
      Secondary
    </a>
    <a class="button button--success" href="#url">
      Success
    </a>
    <a class="button button--info" href="#url">
      Info
    </a>
    <a class="button button--warning" href="#url">
      Warning
    </a>
    <a class="button button--danger" href="#url">
      Danger
    </a>
    <a class="button button--link" href="#url">
      Link
    </a>
  </div>
</Playground>

## Sizes

<Playground>
  <div>
    <button class="button button--sm button--primary">Small Button</button>
    <button class="button button--primary">Default Button</button>
    <button class="button button--lg button--primary">Large Button</button>
  </div>
</Playground>

## Block

<Playground>
  <button class="button button--block button--primary">Block Button</button>
</Playground>
